import React, { Component } from 'react';

// 引入图表组件

import ReactEcharts from 'echarts-for-react';

export default class index extends Component {
  getOptions2 = () => {
    return {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      legend: {
        data: ['商品类型', '商品数量', '装饰产品', '保养产品'],
      },
      series: [
        {
          name: '管理员数据',
          type: 'pie',
          selectedMode: 'single',
          radius: [0, '30%'],
          label: {
            position: 'inner',
            fontSize: 14,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1548, name: '商品类型' },
            { value: 775, name: '商品数量' },
          ],
        },
        {
          name: '商品数据',
          type: 'pie',
          radius: ['45%', '60%'],
          labelLine: {
            length: 30,
          },
          label: {
            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}',
            backgroundColor: '#ffffff',
            borderColor: '#8C8D8E',
            borderWidth: 1,
            borderRadius: 4,
            rich: {
              a: {
                color: '#6E7079',
                lineHeight: 22,
                align: 'center',
              },
              hr: {
                borderColor: '#8C8D8E',
                width: '100%',
                borderWidth: 1,
                height: 0,
              },
              b: {
                color: '#ffffff',
                fontSize: 14,
                fontWeight: 'bold',
                lineHeight: 33,
              },
              per: {
                color: '#fff',
                backgroundColor: '#ffffff',
                padding: [3, 4],
                borderRadius: 4,
              },
            },
          },
          data: [
            { value: 1048, name: '装饰产品' },
            { value: 335, name: '保养产品' },
          ],
        },
      ],
    };
  };
  render() {
    return (
      <div>
        <ReactEcharts
          option={this.getOptions2()}
          style={{ height: '400px', width: '50%' }}
          className="react-for-echars"
        ></ReactEcharts>
      </div>
    );
  }
}
